<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态时间轴数据可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        .description {
            color: #7f8c8d;
            font-size: 16px;
            max-width: 800px;
            margin: 0 auto;
        }
        .chart-container {
            height: 500px;
            margin-bottom: 20px;
        }
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s;
        }
        button:hover {
            background: #2980b9;
        }
        .status-bar {
            text-align: center;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
            margin-top: 20px;
            font-size: 14px;
        }
        .time-segments {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }
        .segment {
            text-align: center;
            padding: 8px;
            border-radius: 5px;
            flex: 1;
            margin: 0 2px;
            font-size: 14px;
        }
        .segment.active {
            background: #3498db;
            color: white;
            font-weight: bold;
        }
        .segment.fixed {
            background: #e74c3c;
            color: white;
        }
        .segment.future {
            background: #ecf0f1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>动态时间轴数据可视化</h1>
            <p class="description">该图表展示按3小时分段的数据趋势，每30秒自动更新当前时间段数据，已完成的时间段数据将固定不再变化。</p>
        </div>
        
        <div class="controls">
            <button id="pauseBtn">暂停更新</button>
            <button id="resumeBtn">继续更新</button>
            <button id="resetBtn">重置图表</button>
        </div>
        
        <div class="chart-container" id="chart"></div>
        
        <div class="time-segments" id="timeSegments">
            <!-- 时间段指示器将通过JS动态生成 -->
        </div>
        
        <div class="status-bar" id="statusBar">
            下次更新: <span id="countdown">30</span> 秒 | 当前时间段: <span id="currentSegment"></span>
        </div>
    </div>

    <script>
        // 初始化变量
        let chart;
        let updateInterval;
        let countdownInterval;
        let isPaused = false;
        const segments = [
            { start: 0, end: 3, label: "0:00-3:00", data: [], fixed: false },
            { start: 3, end: 6, label: "3:00-6:00", data: [], fixed: false },
            { start: 6, end: 9, label: "6:00-9:00", data: [], fixed: false },
            { start: 9, end: 12, label: "9:00-12:00", data: [], fixed: false },
            { start: 12, end: 15, label: "12:00-15:00", data: [], fixed: false },
            { start: 15, end: 18, label: "15:00-18:00", data: [], fixed: false },
            { start: 18, end: 21, label: "18:00-21:00", data: [], fixed: false },
            { start: 21, end: 24, label: "21:00-24:00", data: [], fixed: false }
        ];
        
        // 初始化图表
        function initChart() {
            chart = echarts.init(document.getElementById('chart'));
            
            const option = {
                title: {
                    text: '动态时间轴数据趋势',
                    left: 'center',
                    top: 10
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        const date = new Date(params[0].data[0]);
                        const hours = date.getHours().toString().padStart(2, '0');
                        const minutes = date.getMinutes().toString().padStart(2, '0');
                        return `${hours}:${minutes} - 值: ${params[0].data[1]}`;
                    }
                },
                xAxis: {
                    type: 'time',
                    name: '时间',
                    nameLocation: 'middle',
                    nameGap: 30,
                    axisLabel: {
                        formatter: function(value) {
                            const date = new Date(value);
                            return date.getHours() + ':00';
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '数据值',
                    min: 0,
                    max: 100
                },
                series: [{
                    name: '数据',
                    type: 'line',
                    showSymbol: false,
                    smooth: true,
                    lineStyle: {
                        width: 3
                    },
                    data: []
                }],
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '15%',
                    containLabel: true
                },
                animation: true
            };
            
            chart.setOption(option);
            
            // 初始化时间段指示器
            initTimeSegments();
            
            // 开始数据更新
            startUpdates();
        }
        
        // 初始化时间段指示器
        function initTimeSegments() {
            const container = document.getElementById('timeSegments');
            container.innerHTML = '';
            
            segments.forEach(segment => {
                const el = document.createElement('div');
                el.className = 'segment';
                el.textContent = segment.label;
                el.id = `segment-${segment.start}`;
                container.appendChild(el);
            });
            
            updateSegmentIndicators();
        }
        
        // 更新时间段指示器状态
        function updateSegmentIndicators() {
            const now = new Date();
            const currentHour = now.getHours();
            
            segments.forEach(segment => {
                const el = document.getElementById(`segment-${segment.start}`);
                el.classList.remove('active', 'fixed', 'future');
                
                if (segment.fixed) {
                    el.classList.add('fixed');
                } else if (currentHour >= segment.start && currentHour < segment.end) {
                    el.classList.add('active');
                    document.getElementById('currentSegment').textContent = segment.label;
                } else if (currentHour < segment.start) {
                    el.classList.add('future');
                }
            });
        }
        
        // 生成模拟数据
        function generateData(segment) {
            const now = new Date();
            const currentHour = now.getHours();
            const currentMinute = now.getMinutes();
            const currentSecond = now.getSeconds();
            
            // 如果当前时间不在这个时间段内，且还未固定，则生成完整数据
            if (currentHour < segment.start || segment.fixed) {
                for (let h = segment.start; h < segment.end; h++) {
                    for (let m = 0; m < 60; m += 30) { // 每30分钟一个数据点
                        const time = new Date();
                        time.setHours(h, m, 0, 0);
                        const value = Math.floor(Math.random() * 30 + 50); // 50-80之间的随机值
                        segment.data.push([time, value]);
                    }
                }
            } else {
                // 当前时间段，生成到当前时间的数据
                for (let h = segment.start; h <= currentHour; h++) {
                    const maxMinute = (h === currentHour) ? currentMinute : 59;
                    
                    for (let m = 0; m <= maxMinute; m += 30) {
                        // 如果是当前小时且当前分钟，使用精确到秒的时间
                        if (h === currentHour && m === Math.floor(currentMinute / 30) * 30) {
                            const time = new Date();
                            time.setSeconds(currentSecond);
                            const value = Math.floor(Math.random() * 30 + 50);
                            segment.data.push([time, value]);
                        } else {
                            const time = new Date();
                            time.setHours(h, m, 0, 0);
                            const value = Math.floor(Math.random() * 30 + 50);
                            segment.data.push([time, value]);
                        }
                    }
                }
            }
        }
        
        // 更新图表数据
        function updateChartData() {
            const now = new Date();
            const currentHour = now.getHours();
            
            // 检查是否有需要固定的时间段
            segments.forEach(segment => {
                if (!segment.fixed && currentHour >= segment.end) {
                    segment.fixed = true;
                }
            });
            
            // 为未固定的时间段生成数据
            segments.forEach(segment => {
                if (!segment.fixed && segment.data.length === 0) {
                    generateData(segment);
                } else if (!segment.fixed) {
                    // 为当前时间段添加新数据点
                    const time = new Date();
                    const value = Math.floor(Math.random() * 30 + 50);
                    segment.data.push([time, value]);
                }
            });
            
            // 合并所有时间段的数据
            const allData = [];
            segments.forEach(segment => {
                allData.push(...segment.data);
            });
            
            // 更新图表
            chart.setOption({
                series: [{
                    data: allData
                }]
            });
            
            // 更新时间段指示器
            updateSegmentIndicators();
        }
        
        // 开始数据更新
        function startUpdates() {
            // 先立即更新一次数据
            updateChartData();
            
            // 设置定时器，每30秒更新一次
            updateInterval = setInterval(updateChartData, 30000);
            
            // 倒计时显示
            let countdown = 30;
            document.getElementById('countdown').textContent = countdown;
            
            countdownInterval = setInterval(() => {
                if (!isPaused) {
                    countdown--;
                    if (countdown <= 0) countdown = 30;
                    document.getElementById('countdown').textContent = countdown;
                }
            }, 1000);
        }
        
        // 暂停更新
        function pauseUpdates() {
            clearInterval(updateInterval);
            clearInterval(countdownInterval);
            isPaused = true;
            document.getElementById('countdown').textContent = '已暂停';
        }
        
        // 继续更新
        function resumeUpdates() {
            isPaused = false;
            startUpdates();
        }
        
        // 重置图表
        function resetChart() {
            // 清除所有数据
            segments.forEach(segment => {
                segment.data = [];
                segment.fixed = false;
            });
            
            // 重新初始化
            initChart();
        }
        
        // 页面加载完成后初始化图表
        window.addEventListener('load', function() {
            initChart();
            
            // 添加事件监听器
            document.getElementById('pauseBtn').addEventListener('click', pauseUpdates);
            document.getElementById('resumeBtn').addEventListener('click', resumeUpdates);
            document.getElementById('resetBtn').addEventListener('click', resetChart);
            
            // 窗口调整大小时重置图表大小
            window.addEventListener('resize', function() {
                if (chart) {
                    chart.resize();
                }
            });
        });
    </script>
</body>
</html>